<template>
	<view>
		<view class="step_box">
			<view class="step_item" v-for="(item,index) in list" :key="item.status">
				<view class="step_item_status" :class="item.status<=curStep?'bg_FF2E2E':''">
					<view v-if="index+1 != list.length" class="step_item_dotted"
						:class="item.status+1<=curStep?'border_FF2E2E':''"
					></view>
				</view>
				<view class="step_item_name" :class="curStep==item.status?'color_FF2E2E':''">
					{{item.name}}
				</view>
				<view class="step_item_name" v-if="item.time">
					{{item.time}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * @list  进度条内容  [{status:1,name:'name'}]
	 * @curStep  当前进度
*/
	export default{
		props:['list','curStep'],
		data(){
			return{
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.step_box{
		width: 100%;
		height: 140rpx;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
	}
	
	.step_item{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.step_item_status{
		width: 32rpx;
		height: 32rpx;
		background-color: #cfcfcf;
		border-radius: 50%;
		position: relative;
	}
	
	.bg_FF2E2E{
		background-color: #FF2E2E;
	}
	
	.color_FF2E2E{
		color: #FF2E2E !important;
	}
	
	.border_FF2E2E{
		border-bottom: 2rpx dashed #FF2E2E !important;
	}
	
	.step_item_dotted{
		position: absolute;
		width: 100rpx;
		height: 0;
		border-bottom: 2rpx dashed #999999;
		top: 50%;
		left: 90rpx;
		transform: translate(-50%);
	}
	
	.step_item_name{
		margin-top: 18rpx;
		font-size: 26rpx;
	}
	
</style>